 <template>
  <div class="index-box" ref="index">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="moneyTotal" ref="topData">
            <div class="item">
              <div class="money">{{topData.shareFansTotal}}</div>
              <div class="text">分享粉丝总计(人)</div>
            </div>
            <div class="item">
              <div class="money">{{topData.referrerUnionTotal}}</div>
              <div class="text">推荐加盟总数(人)</div>
            </div>
            <div class="item">
              <div class="money">{{topData.shopSweepingTotal}}</div>
              <div class="text">扫店总计(家)</div>
            </div>
            <div class="item">
              <div class="money">¥{{topData.totalReferrerUnionAmount}}</div>
              <div class="text">推荐收益总金额(元)</div>
            </div>
            <div class="item">
              <div class="money">¥{{topData.referrerUnionWithdrawableAmount}}</div>
              <div class="text">可提额总计(元)</div>
            </div>
            <div class="item">
              <div class="money">¥{{topData.transactionIncomeTotalAmount}}</div>
              <div class="text">交易收益总金额</div>
            </div>
            <div class="item">
              <div class="money">¥{{topData.transactionIncomeWithdrawableCash}}</div>
              <div class="text">可提现总计</div>
            </div>
        </div>
        <div class="search" ref="search">
          <el-form :inline="true" :model="searchForm" size="small" ref="searchForm" @submit.native.prevent
            class="demo-form-inline" id="searchBox">
            <el-form-item prop="referrerTelephone">
                <el-input v-model="searchForm.referrerTelephone" clearable placeholder="推荐人手机号"></el-input>
            </el-form-item>
            <el-form-item prop="referrerName">
                <el-input v-model="searchForm.referrerName" clearable placeholder="推荐人姓名"></el-input>
            </el-form-item>
            <el-form-item prop="time">
            	<el-date-picker v-model="time" type="daterange" align="right" unlink-panels
            		range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
            		format="yyyy-MM-dd" value-format="yyyy-MM-dd" :picker-options="pickerOptions">
            	</el-date-picker>
            </el-form-item>

            <el-form-item class="clearfix">
              <el-button type="primary" @click="handleSearch()" icon="el-icon-search">搜索</el-button>
              <el-button icon="el-icon-refresh" size="small" @click="resetSearch">重置</el-button>
              <el-button
                type="warning"
                icon="el-icon-download"
                size="small"
                :loading="btnLoading"
                @click="handleExport"
                v-has="'statistics:recommendJoin:down'"
              >导出</el-button>
            </el-form-item>
            <div class="actionBtnRight" style="margin-left:auto">
                <MyRefresh></MyRefresh>
                <MyTableColumnSet :tableColumn.sync="tableColumn" :hideTableColumn.sync="hideTableColumn" :tableColumnType.sync="tableColumnType"></MyTableColumnSet>
            </div>
          </el-form>
        </div>
        <div class="table" ref="table">
          <el-table :data="dataList" style="width: 100%"  border :height="tableHeight" v-loading="loading" stripe>
            <el-table-column prop="name" label="推荐人头像" v-if="!hideTableColumn.includes('img')" width="110" align="center">
              <template #default="scope">
                 <el-image :src="scope.row.referrerUserface" fit="fill" class="img" v-image-preview="scope.row.referrerUserface"></el-image>
              </template>
            </el-table-column>
            <el-table-column prop="referrerTelephone" label="推荐人手机号" v-if="!hideTableColumn.includes('phone')" align="center"></el-table-column>
            <el-table-column prop="referrerName" label="推荐人姓名" v-if="!hideTableColumn.includes('name')" align="center"></el-table-column>
             <el-table-column prop="shareFansTotal" label="分享粉丝合计(人)" v-if="!hideTableColumn.includes('joinNumber')" align="center"></el-table-column>
            <el-table-column prop="referrerUnionTotal" label="推荐加盟合计(人)" v-if="!hideTableColumn.includes('joinNumber')" align="center"></el-table-column>
            <el-table-column prop="shopSweepingTotal" label="扫店总数(家)" v-if="!hideTableColumn.includes('joinNumber')" align="center"></el-table-column>
            <el-table-column prop="totalReferrerUnionAmount" label="推荐收益合计金额(元)" v-if="!hideTableColumn.includes('joinMoney')" align="center"></el-table-column>
            <el-table-column prop="referrerUnionWithdrawableAmount" label="推荐收益可提额合计(元)" v-if="!hideTableColumn.includes('joinTotalMoney')" align="center"></el-table-column>
            <el-table-column prop="transactionIncomeTotalAmount" label="交易收益合计金额(元)" v-if="!hideTableColumn.includes('yiUpMoney')" align="center"></el-table-column>
            <el-table-column prop="transactionIncomeWithdrawableCash" label="交易收益可提现合计(元)" v-if="!hideTableColumn.includes('shouTotalMoney')" align="center"></el-table-column>
            <el-table-column prop="name" label="操作" width="200" align="center" fixed="right">
            	<template #default="scope">
            		<el-button size="medium" type="text" icon="el-icon-share" @click="handleFansDetail(scope.row)" v-has="'statistics:recommendJoin:FansDetail'">分享粉丝明细</el-button>
            		<el-button size="medium" type="text" icon="el-icon-s-custom" @click="handleJoinDetail(scope.row)" v-has="'statistics:recommendJoin:JoinDetail'">推荐加盟明细</el-button>
                <el-button size="medium" type="text" icon="el-icon-s-shop" @click="handleScanStoreDetail(scope.row)" v-has="'statistics:recommendJoin:ScanStoreDetail'">扫店明细</el-button>
            	</template>
            </el-table-column>
          </el-table>
        </div>
        <div class="page" ref="page">
          <MyPagination :total="total" :page.sync="searchForm.pageNum" :limit.sync="searchForm.pageSize"
          	@pagination="dataInfo" />
        </div>
      </el-col>
    </el-row>

    <!-- 分享粉丝明细	 -->
    <el-dialog title="分享粉丝明细" width="1000px" :close-on-click-modal="false" v-dialogDrag :visible.sync="fansDetailVisible" @close="fansDetailVisible = false">
      <div class="d-flex flex-between" style="font-size: 16px;">
       <p style="margin: 0 0 10px 0;">用户手机号为<span class="red">{{statusRow.referrerTelephone}}</span>用户的分享粉丝明细</p>
       <p style="margin: 0 0 10px 0;">成功推荐总数<span class="red">{{dialogTotal}}人</span></p>
      </div>
       <div class="table" >
         <el-table :data="dialoTableList" style="width: 100%"  border v-loading="dialogTableLoading" stripe>
           <el-table-column prop="name" label="用户头像" width="150" align="center">
             <template #default="scope">
                <el-image :src="scope.row.userface" fit="fill" class="img" v-image-preview="scope.row.userface"></el-image>
             </template>
           </el-table-column>
           <el-table-column prop="userName" label="用户名"  align="center"></el-table-column>
           <el-table-column prop="telephone" label="手机号"  align="center"></el-table-column>
            <el-table-column prop="shareFansTotal" label="加入时间"  align="center">
              <template slot-scope="scope">
              	<span>{{ parseTime(scope.row.joinTime) }}</span>
              </template>
            </el-table-column>
         </el-table>
       </div>
       <div class="page" ref="page">
         <MyPagination :total="dialogTotal" :page.sync="dialogForm.pageNum" :limit.sync="dialogForm.pageSize"
         	@pagination="getFansDetailList" />
       </div>
    	<div slot="footer" class="dialog-footer">
    		<el-button @click="fansDetailVisible = false" size="small">关 闭</el-button>
    	</div>
    </el-dialog>

    <!-- 扫店明细	 -->
    <el-dialog title="扫店明细" width="1000px" :close-on-click-modal="false" v-dialogDrag :visible.sync="scanStoreDetailVisible" @close="scanStoreDetailVisible = false">
      <div class="d-flex flex-between" style="font-size: 16px;">
       <p style="margin: 0 0 10px 0;">用户手机号为<span class="red">{{statusRow.referrerTelephone}}</span>用户的扫店明细</p>
       <p style="margin: 0 0 10px 0;">成功扫店总数<span class="red">{{dialogTotal}}人</span></p>
      </div>
       <div class="table" >
         <el-table :data="dialoTableList" style="width: 100%"  border v-loading="dialogTableLoading" stripe>
           <el-table-column prop="storeLogo" label="门店logo" width="150" align="center">
             <template #default="scope">
                <el-image :src="scope.row.storeLogo" fit="fill" class="img" v-image-preview="scope.row.storeLogo"></el-image>
             </template>
           </el-table-column>
           <el-table-column prop="storeName" label="门店名称"  align="center"></el-table-column>
           <el-table-column prop="legalPersonName" label="法人姓名"  align="center"></el-table-column>
           <el-table-column prop="legalPersonTelephone" label="法人手机号"  align="center"></el-table-column>
            <el-table-column prop="successfullySettledTime" label="成功入驻时间"  align="center">
              <template slot-scope="scope">
              	<span>{{ parseTime(scope.row.successfullySettledTime) }}</span>
              </template>
            </el-table-column>
         </el-table>
       </div>
       <div class="page" ref="page">
         <MyPagination :total="dialogTotal" :page.sync="dialogForm.pageNum" :limit.sync="dialogForm.pageSize"
         	@pagination="getScanStoreDetail" />
       </div>
    	<div slot="footer" class="dialog-footer">
    		<el-button @click="scanStoreDetailVisible = false" size="small">关 闭</el-button>
    	</div>
    </el-dialog>
  </div>
</template>

<script>
  import common from '@/api/api';
  import {
    getRecommendedReport,
    recommendedReportExport,
    recommendedReportList,
    shareFansDetaile,
    shopSweepingDetaile
  } from '@/api/getData'
  import option from '../../common/option.js';

  export default {
    data() {
      return {
        loading: false,
        btnLoading:false,
        time:[],
        searchForm: {
          referrerName:'',
          referrerTelephone:'',
          pageNum: 1,
          pageSize: 20,
        },

        tableColumn:[{/*自定义表格列*/
            name:'序号',
            value:'number'
        },{
            name:'商品图',
            value:'img'
        },{
            name:'订单编号',
            value:'code'
        },{
            name:'商品名称',
            value:'storeName'
        },{
            name:'云仓售价(元)',
            value:'storeType'
        },{
            name:'平台售价(单)',
            value:'orderNumber'
        },{
            name:'商品数量(元)',
            value:'orderMoney'
        },{
            name:'订单合计金额(元)',
            value:'fuTotalMoney'
        },{
            name:'实付合计金额(元)',
            value:'shouTotalMoney'
        },{
            name:'交易提成(元)',
            value:'upMoney'
        },{
            name:'平台实收金额(元)',
            value:'upMoneyCost'
        },{
            name:'云仓实收金额(元)',
            value:'upMoneyTotal'
        }],
        hideTableColumn:[],/*自定义表格列需要隐藏的*/
        tableColumnType:'staffManagement',/*自定义表格列类型传参*/
        tableHeight:0,//table 高度
        topData:{},
        dataList:[],
        total: 0,

        fansDetailVisible:false,
        dialogTableLoading:false,
        statusRow:{},
        dialogForm: {
          customerId :'',
          pageNum: 1,
          pageSize: 10,
        },
        dialogTotal: 0,
        dialoTableList:[],

        scanStoreDetailVisible:false
      }
    },
    computed: {
    	pickerOptions: () => {
    		return option.pickerOptions;
    	}
    },
    mounted() {
      this.topDataInfo();
      this.dataInfo();
      this.$nextTick(() => {
          this.tableHeight = this.$refs.index.offsetHeight - this.$refs.search.offsetHeight - this.$refs.topData.offsetHeight - this.$refs.page.offsetHeight - 55;
      })
    },
    methods: {
      /** 分享粉丝明细 **/
     handleFansDetail(row){
          this.statusRow = row;
          this.dialogForm.customerId = row.customerId;
          this.dialogForm.pageNum = 1;
          this.fansDetailVisible = true;
          this.getFansDetailList();
      },
      async getFansDetailList(){
        try {
          this.dialogTableLoading = true;
          const result = await shareFansDetaile(this.dialogForm);
          if (result.code == 200) {
            this.dialogTotal = result.total;
            this.dialoTableList = result.rows;
          } else {
            this.$message.error(result.msg);
          }
          this.dialogTableLoading = false;
        } catch (err) {
          console.log(err)
        }
      },
      /** 推荐加盟明细 **/
      handleJoinDetail(row){
        this.$router.push({path:'/statistics/singleJoinDetail',query:{phone:row.referrerTelephone,customerId:row.customerId,name:row.referrerName}})
      },
      /** 扫店明细 **/
      handleScanStoreDetail(row){
        this.statusRow = row;
        this.dialogForm.customerId = row.customerId;
        this.dialogForm.pageNum = 1;
        this.scanStoreDetailVisible = true;
        this.getScanStoreDetail();
      },
      async getScanStoreDetail(){
        try {
          this.dialogTableLoading = true;
          const result = await shopSweepingDetaile(this.dialogForm);
          if (result.code == 200) {
            this.dialogTotal = result.total;
            this.dialoTableList = result.rows;
          } else {
            this.$message.error(result.msg);
          }
          this.dialogTableLoading = false;
        } catch (err) {
          console.log(err)
        }
      },
      topDataInfo(){
         let data = this.addDateRange(this.searchForm, this.time, 'startTime', 'endTime');
         getRecommendedReport(this.searchForm).then((res)=>{
           this.topData = res.data;
         })
       },
       /** 导出按钮操作 */
      handleExport() {
       let data = this.addDateRange(this.searchForm, this.time, 'startTime', 'endTime');
         this.$modal.confirm('是否确认导出搜索数据项？').then(() => {
           this.btnLoading = true;
           return recommendedReportExport(data);
         }).then(response => {
           this.$download.name(response.msg);
           this.btnLoading = false;
         }).catch(() => {});
      },
      handleSearch(){
          this.searchForm.pageNum = 1;
          this.dataInfo();
          this.topDataInfo();
      },
      async dataInfo() {
        try {
         let data = this.addDateRange(this.searchForm, this.time, 'startTime', 'endTime');
          this.loading = true;
          const result = await recommendedReportList(data);
          if (result.code == 200) {
            this.total = result.total;
            this.dataList = result.rows;
          } else {
            this.$message.error(result.msg);
          }
          this.loading = false;
        } catch (err) {
          this.loading = false;
          console.log(err)
        }
      },
      resetSearch(){
        this.tiem = [];
        this.resetForm('searchForm');
        this.dataInfo();
       this.topDataInfo();
      },
       normalizer(node) {
       	if (node.children && !node.children.length) {
       		delete node.children;
       	}
       	return {
       		id: node.categoryId,
       		label: node.name,
       		children: node.children
       	};
       },

    }
  }
</script>

<style scoped lang="scss">

  .el-table .el-dropdown-link{
      cursor: pointer;
      color: #61997A;
      margin-left: 5px;
  }
    .leftDialog{
      height:540px;
      overflow-y: auto;
    }
    .activeVerticalBox .activeItem{
      color:#61997A;
      cursor: pointer;
      margin: 0px;
      text-align: center;
      height:20px;
      line-height: 20px;
    }
    .activeVerticalBox .el-dropdown{
      display: flex;
      justify-content: center;
      color:#61997A;
      cursor: pointer;
    }
    .activeCheckedBox{
      border-top: 1px solid #ddd;
      padding:10px;
      height:52px;
      .el-tag{
        margin-right:10px;
      }
    }
    .rateBox /deep/ .el-rate__icon{
      margin-right: 0px;
    }
    .rateBox>p{
      margin: 0px;
    }
    .rateBox>p> /deep/ .el-rate{
      height:25px;
      line-height:25px;
      display:flex;
    }
    .rateBox>p> /deep/ .el-rate .el-rate__item{
      display:flex;
      align-items: center;
    }
    .rateBox .rateText{
      width:60px;
    }
    .rateBox .content{
      display: flex;
    }
    .rateBox .el-tooltip{
      width: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: inline-block;
    }
</style>
